<template>
  <a-spin :spinning="loadingRoleData">
    <ul class="roleListUl">
      <li
        class="roleListItem"
        :class="{ active: selectedRole && selectedRole.id == item.id }"
        v-for="item in roleData"
        :key="item.id"
        @click="changeRole(item)"
      >
        <i class="iconfont icon-yonghu"></i>
        <span
          class="roleName"
        ><table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis
        ></span>
      </li>
    </ul>
  </a-spin>
</template>
<script>
import { mapState } from 'vuex'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    tableEllipsis
  },
  computed: {
    ...mapState({
      roleData: (state) => state.role.roleData,
      selectedRole: (state) => state.role.selectedRole
    })
  },
  data () {
    return {
      loadingRoleData: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.loadingRoleData = true
      this.$store
        .dispatch('getRoleData')
        .then(() => {})
        .finally(() => {
          this.loadingRoleData = false
        })
    },
    changeRole (data) {
      this.$emit('selectedRoleNew', {
        id: data.id,
        name: data.name,
        remark: data.remark,
        auditor: data.auditor,
        enableMessageNotice: data.enableMessageNotice || false
      })
      this.$store.commit('SET_SELECTED_ROLE', {
        id: data.id,
        name: data.name,
        remark: data.remark,
        auditor: data.auditor,
        enableMessageNotice: data.enableMessageNotice || false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.roleListUl {
  padding-top: 12px;
  .roleListItem {
    height: 48px;
    line-height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    color: @color333;
    &:hover {
      background-color: @blockHoverBgColor;
      .roleName {
        color: @blockHoverTextColor;
      }
    }
    &.active {
      .roleName {
        color: @blockHoverTextColor;
      }
    }
  }
  .iconfont {
    margin-right: 10px;
  }
}
</style>
